<div class="modal modal-default fade show" ng-init="getList()">
    <div class="modal-dialog modal-lg modal-dialog-centered" style="max-width: 95%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="mi mi-Media"></i> Quick media upload</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- <div class="modal-body" style="height: calc(100vh - 143px);overflow-y: auto;"> -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                    </div>

                </div>
                <table class="table table-sm table-condensed m-0">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">
                                Title
                            </th>
                            <th scope="col">
                                Image
                            </th>
                            <th scope="col" width="5%" class="text-right">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in data.items track by $index">
                            <td>
                                <input type="text" ng-model="item.title" class="form-control form-control-sm">
                            </td>
                            <td>
                                <input type="text" ng-model="item.description" class="form-control form-control-sm">
                            </td>
                            <td width="15%">

                                <div class="input-group input-group-sm">
                                    <input id="path-modal-{{$index}}" value="{{item.fullPath}}" onclick="this.select()" class="form-control form-control-sm" readonly="readonly">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary btn-clipboard" type="button" data-clipboard-target="#path-modal-{{$index}}"><i class="mi mi-Copy"></i></button>
                                    </div>
                                </div>
                            </td>
                            <td width="35%">
                                <a class="" style="cursor:pointer;" ng-click="togglePreview(item)">
                                    <img class="rounded" ng-src="{{item.fullPath}}" ng-class="{preview: item.isPreview}">
                                </a>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
                                    <a ng-click="save(item)" class="btn btn-sm btn-light">
                                        <span class="fas fa-check text-info"></span>
                                    </a>
                                    <a ng-click="remove(item.id)" class="btn btn-sm btn-light">
                                        <span class="fas fa-times text-danger"></span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">

                <div class="col-md-7">
                    <div class="col-md-12" role="toolbar" aria-label="Toolbar with button groups">
                            <custom-file header="''" folder="'Medias'" media-file="activedData.mediaFile" data="activedData" src-url="activedData.mediaFile.fullPath" save="save(activedData)" auto="'false'" class=""></custom-file>
                    </div>
                </div>
                <paging class="small col-md-5" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="getList(page-1)" scroll-top="true">
            </paging></div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
